import {
  Collapse,
  Space,
  Select,
  Input,
  Descriptions,
  Pagination,
  Button,
  Modal,
  Row,
  Col,
  AutoComplete,
  message
} from "antd";
import React from "react";
import {
  SwapOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined
} from "@ant-design/icons";
import { routerRedux } from "dva/router";
import styles from "./style.less";
import Chart from "../../components/Chart";
import { ReadingIncrement } from "./echarts";

import icon from "../../assets/images/admob.png";
import { connect } from "dva";
const { Panel } = Collapse;
const { Search } = Input;
const { Option } = Select;

const sortList = ["发布日期", "点击量", "使用量"];
const imgBaseUrl = "http://21.108.153.117:8001";

@connect(({ global }) => ({ userId: global.userId }))
class DataAssets extends React.PureComponent {
  constructor(props) {
    super(props);
    this.searchRef = React.createRef();
    this.state = {
      // sortIndex: - 1,
      collect: [],
      AnnounceModel: [],
      AnnounceModelId: "",
      sort: "",
      scope: "",
      subjects: "",
      classificationList: [],
      classificationList1: [],
      classificationList2: [],
      details: [],
      typeIndex: "",
      leftIndex: "",
      dataTypeIndex: "",
      sortIndex: 0,
      searchList: [],
      pageSize: 5,
      pageNum: 0,
      total: 0,
      catalog: "",
      hotWordVos: {},
      title: "",
      hotWord: [], //
      reForm: {},
      isModalVisible: false,
      chartsData: [], //数据关联
      //资源检索传值
      sourceSearchkeys: "",
      showIcon: false,
      show: <ArrowUpOutlined />,
      autoOptions:[],//用户
      personId:""
    };
  }
  componentDidMount() {
    console.log(this.props.location);
    if (this.props.location.hotWord) {
      this.setState(
        {
          sourceSearchkeys: this.props.location.hotWord
        },
        () => {
          this.advancedSearch();
          this.onSearch(this.props.location.hotWord);
        }
      );
    }
    this.setState(
      {
        leftIndex: this.props.location.state
          ? this.props.location.state.subjectsValue
          : "",
        typeIndex: this.props.location.state
          ? this.props.location.state.rangeValue
          : "",
        dataTypeIndex: this.props.location.state
          ? this.props.location.state.formatValue
          : "",
        sourceSearchkeys: this.props.location.searchValue,
        reForm: this.props.location.state
      },
      () => {
        this.advancedSearch();
      }
    );
    //数据资产--热词
    this.props
      .dispatch({
        type: "global/queryHotWord",
        payload: {}
      })
      .then(res => {
        if (res) {
          this.setState({
            hotWord: res.data
          });
        }
      });
    // 数据资产分类依据--左侧
    this.props
      .dispatch({
        type: "global/queryCategory",
        payload: {
          pid: 2
        }
      })
      .then(res => {
        if (res) {
          this.setState({
            classificationList2: res.data
          });
        }
      });
    // 数据资产分类依据
    this.props
      .dispatch({
        type: "global/queryCategory",
        payload: {
          pid: 5
        }
      })
      .then(res => {
        if (res) {
          this.setState({
            classificationList: [{ dicName: "全部", dicCode: "" }, ...res.data]
          });
        }
      });

    //数据关联接口
    this.props
      .dispatch({
        type: "global/queryHotWord",
        payload: {
          word: this.state.sourceSearchkeys
        }
      })
      .then(res => {
        if (res && res.data.length > 0) {
          this.setState({
            chartsData: [this.state.sourceSearchkeys, ...res.data]
          });
        }
      });

    //数据资产--数据格式
    this.props
      .dispatch({
        type: "global/queryCategory",
        payload: {
          pid: 4
        }
      })
      .then(res => {
        if (res) {
          this.setState({
            classificationList1: [{ dicName: "全部", dicCode: "" }, ...res.data]
          });
        }
      });
  }
  advancedSearch = () => {
    let { pageSize, pageNum, sourceSearchkeys, sort, reForm } = this.state;
    this.props
      .dispatch({
        type: "global/queryDataAsset",
        payload: {
          userId: this.props.userId ? this.props.userId : "",
          text: sourceSearchkeys,
          startTime: reForm ? reForm.startTime : "", //form.xxx
          endTime: reForm ? reForm.endTime : "",
          subjects: reForm ? reForm.subjectsValue : "",
          sources: "",
          format: reForm ? reForm.formatValue : "",
          scope: reForm ? reForm.rangeValue : "",
          pageNum: pageNum === 0 ? 1 : pageNum,
          pageSize: pageSize,
          sort: sort
        }
      })
      .then(res => {
        if (res) {
          this.setState({
            searchList: res.data.rows,
            total: res.data.total
          });
        }
      });
  };
  //分页
  pageChange = (page, pageSize) => {
    this.setState({ pageSize: pageSize, pageNum: page }, () => {
      this.advancedSearch();
    });
  };
  pageSizeChange = (current, size) => {
    this.setState({ pageSize: size, pageNum: 1 }, () => {
      this.advancedSearch();
    });
  };
  //搜索
  onSearch = value => {
    this.setState(
      {
        sourceSearchkeys: value,
        pageNum: 1
      },
      () => {
        this.advancedSearch();
        this.props
          .dispatch({
            type: "global/queryHotWord",
            payload: {
              word: this.state.sourceSearchkeys
            }
          })
          .then(res => {
            if (res.data.length > 0) {
              this.setState({
                chartsData: [this.state.sourceSearchkeys, ...res.data]
              });
            }
          });
      }
    );
  };
  //清空按钮
  getClear = () => {
    this.setState({
      sourceSearchkeys: ""
    });
  };

  //左侧筛选
  handleToSearch = (dicCode, e) => {
    this.setState(
      {
        pageNum: 1,
        leftIndex: dicCode,
        reForm: {
          subjectsValue: dicCode
        }
      },
      () => {
        this.advancedSearch();
        console.log(this.state.leftIndex);
      }
    );
  };
  //使用范围筛选
  handleTypeChange = (dicCode, e) => {
    this.setState(
      {
        pageNum: 1,
        typeIndex: dicCode,
        reForm: {
          rangeValue: dicCode
        }
        // typeIndex: Number(e.target.getAttribute("data-index")),
      },
      () => {
        this.advancedSearch();
      }
    );
  };
  //数据格式筛选
  handleDataTypeChange = (dicCode, e) => {
    this.setState(
      {
        pageNum: 1,
        dataTypeIndex: dicCode,
        reForm: {
          formatValue: dicCode
        }
      },
      () => {
        this.advancedSearch();
      }
    );
  };
  //  发布日期、点击量、使用量排序
  handleSortChange = e => {
    this.setState(
      {
        sortIndex: Number(e.target.getAttribute("data-index")),
        showIcon: true,
        pageNum: 1
      },
      () => {
        if (this.state.sortIndex === 0) {
          if (this.state.sort === "") {
            this.setState(
              {
                sort: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 1) {
            this.setState(
              {
                sort: 2,
                show: <ArrowDownOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 2) {
            this.setState(
              {
                sort: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 3) {
            this.setState(
              {
                sort: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 4) {
            this.setState(
              {
                sort: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 5) {
            this.setState(
              {
                sort: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 6) {
            this.setState(
              {
                sort: 1,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          }
        }
        if (this.state.sortIndex === 1) {
          if (this.state.sort === "") {
            this.setState(
              {
                sort: 3,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 3) {
            this.setState(
              {
                sort: 4,
                show: <ArrowDownOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 4) {
            this.setState(
              {
                sort: 3,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 2) {
            this.setState(
              {
                sort: 3,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 1) {
            this.setState(
              {
                sort: 3,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 5) {
            this.setState(
              {
                sort: 3,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 6) {
            this.setState(
              {
                sort: 3,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          }
        }
        if (this.state.sortIndex === 2) {
          if (this.state.sort === "") {
            this.setState(
              {
                sort: 5,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 5) {
            this.setState(
              {
                sort: 6,
                show: <ArrowDownOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 6) {
            this.setState(
              {
                sort: 5,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 1) {
            this.setState(
              {
                sort: 5,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 2) {
            this.setState(
              {
                sort: 5,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 3) {
            this.setState(
              {
                sort: 5,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          } else if (this.state.sort === 4) {
            this.setState(
              {
                sort: 5,
                show: <ArrowUpOutlined />
              },
              () => {
                this.advancedSearch();
              }
            );
          }
        }
      }
    );
  };
  //点击跳转详情
  handleToDetaile = id => {
    // this.props.dispatch(
    //   routerRedux.push({
    //     pathname: `/dataAssetsDetail/${id}`,
    //     state: {}
    //   })
    // );
    window.open( window.BASE_URL + `/dataAssetsDetail/${id}`)
  };
  //点击收藏
  isCollect = id => {
    this.props
      .dispatch({
        type: "global/addCollection",
        payload: {
          userId: this.props.userId ? this.props.userId : "",
          resourceType: "",
          resourceId: id
        }
      })
      .then(res => {
        this.advancedSearch();
      });
  };

  //取消收藏
  deleteCollect = id => {
    this.props
      .dispatch({
        type: "global/deleteCollection",
        payload: {
          userId: this.props.userId ? this.props.userId : "",
          resourceId: id
        }
      })
      .then(res => {
        this.advancedSearch();
      });
  };
  //分享
  addShare = (item, id) => {
    console.log(item);
    this.setState(
      {
        isModalVisible: true,
        AnnounceModel: item,
        AnnounceModelId: id,
        personId:"",
        autoOptions:[]
      },
      () => {
        this.advancedSearch();
      }
    );
  };
  antoChange=(value)=>{
    console.log("antoChange",value);
  }
  antoSelect=(value, option)=>{
    console.log("antoSelect",value, option);
    this.setState({personId:option.loginId})
  }
  autoSearch=(value)=>{
    console.log("autoSearch",value);
    this.props.dispatch({
      type:"global/getOtherUserInfoList",
      payload: {
        userId:"",
        userName:value
      }
    }).then(res=>{
      console.log(res);
      if(res){
        res.data.map(item=>{
          item.value=item.userName
          // item.label=item.loginId
        })
      }
      this.setState({autoOptions:res.data})
    })
  }
  //授权弹框
  showModal = () => {
    this.setState({
      isModalVisible1: true
    });
  };
  //弹框确定按钮
  handleOk = () => {
    this.state.personId!==""&&this.props
      .dispatch({
        type: "global/addShare",
        payload: {
          userId: this.props.userId,
          resourceType: "",
          resourceId: this.state.AnnounceModelId,
          personId: this.state.personId,
          startTime: "",
          endTime: "",
          text: ""
        }
      })
      .then(res => {
        if(res){
          message.success("分享成功")
        }
        this.setState({
          isModalVisible: false,
          isModalVisible1: false
        });
      });
  };
  //弹框取消按钮
  handleCancel = () => {
    this.props
      .dispatch({
        type: "global/deleteShare",
        payload: {
          userId: this.props.userId,
          shareType: "",
          id: this.state.AnnounceModelId
        }
      })
      .then(res => {
        this.setState({
          isModalVisible1: false,
          isModalVisible: false
        });
      });
  };
  onChartClick = e => {
    console.log("click out", e);
    this.setState(
      {
        sourceSearchkeys: e.name
      },
      () => {
        this.advancedSearch();
        this.onSearch(e.name);
      }
    );
  };

  render() {
    const {
      typeIndex,
      dataTypeIndex,
      sortIndex,
      total,
      chartsData,
      AnnounceModel,
      isModalVisible,
      isModalVisible1,
      leftIndex,
      sourceSearchkeys,
      pageNum,
      showIcon,
      show,
      autoOptions
    } = this.state;
    return (
      <div className={styles.content}>
        <div className={styles.bannerBox}>
          <div className={styles.searchInBanner}>
            <div className={styles.searchBox}>
              <Search
                placeholder="请输入关键字"
                value={sourceSearchkeys}
                onChange={e =>
                  this.setState({ sourceSearchkeys: e.target.value })
                }
                onSearch={this.onSearch}
              />
              <Button onClick={this.getClear}>清空</Button>
            </div>
            <div className={styles.hotKeyWordsBox}>
              <Space align="center">
                热门检索词汇:
                {this.state.hotWord.map((item, index) => {
                return (
                  <span
                    key={index}
                    onClick={() => this.onSearch(item)}
                    className={styles.kewWords}
                  >
                    {item}
                  </span>
                );
              })}
              </Space>
            </div>
          </div>
        </div>
        <div className={styles.contentBody}>
          <div className={styles.clearfix}>
            <div className={styles.fl} style={{ width: "25%" }}>
              {/* 数据关联 */}
              <div className={styles.detailBodyRightTop}>
                <p className={styles.detailBodyRightTitle}>数据关联</p>
                <div className={styles.chartBox}>
                  <Chart
                    option={ReadingIncrement(chartsData, 0)}
                    onChartClick={this.onChartClick}
                  />
                </div>
              </div>
              <div className={styles.leftContent}>
                <Collapse bordered={false}>
                  {this.state.classificationList2.length > 0 ? (
                    this.state.classificationList2.map((item, index) => {
                      return (
                        <Panel header={item.dicName} key={index}>
                          {item.childList.map((item, index) => {
                            return (
                              <p
                                key={index}
                                data-index={index}
                                className={
                                  leftIndex === item.dicCode
                                    ? `${styles.colloractive}`
                                    : ""
                                }
                                onClick={e =>
                                  this.handleToSearch(item.dicCode, e)
                                }
                              >
                                {item.dicName}
                              </p>
                            );
                          })}
                        </Panel>
                      );
                    })
                  ) : (
                    <Panel showArrow={false}></Panel>
                  )}
                </Collapse>
              </div>
            </div>
            <div className={styles.fl} style={{ width: "75%" }}>
              <div className={styles.rightContent}>
                <div className={styles.rightContentHead}>
                  <div className={styles.typeList}>
                    <Space>
                      <span className={styles.listLable}>使用范围:</span>
                      {this.state.classificationList.map((item, index) => {
                        return (
                          <span
                            key={index}
                            data-index={index}
                            className={
                              typeIndex === item.dicCode
                                ? `${styles.active}`
                                : ""
                            }
                            onClick={e =>
                              this.handleTypeChange(item.dicCode, e)
                            }
                          >
                            {item.dicName}
                          </span>
                        );
                      })}
                    </Space>
                  </div>
                  <div className={styles.dataTypeList}>
                    <Space>
                      <span className={styles.listLable}>数据格式：</span>
                      {this.state.classificationList1.map((item, index) => {
                        return (
                          <span
                            key={index}
                            data-index={index}
                            className={
                              dataTypeIndex === item.dicCode
                                ? `${styles.active}`
                                : ""
                            }
                            onClick={e =>
                              this.handleDataTypeChange(item.dicCode, e)
                            }
                          >
                            {item.dicName}
                          </span>
                        );
                      })}
                    </Space>
                  </div>
                </div>
                <div className={styles.sortBox}>
                  <div className={styles.clearfix}>
                    <div className={styles.fl}>
                      <Space>
                        {sortList.map((item, index) => {
                          return (
                            <span
                              key={index}
                              data-index={index}
                              className={
                                sortIndex === index
                                  ? `${styles.active} ${styles.sortBtn}`
                                  : `${styles.sortBtn}`
                              }
                              onClick={e => this.handleSortChange(e)}
                            >
                              {item}
                              <span
                                style={{ display: showIcon ? "block" : "none" }}
                              >
                                <span
                                  style={{
                                    display:
                                      sortIndex === index ? "block" : "none",
                                    paddingLeft: "73px",
                                    marginTop: "-29px"
                                  }}
                                >
                                  {show}
                                </span>
                              </span>
                            </span>
                          );
                        })}
                      </Space>
                    </div>
                    <div className={styles.fr}>
                      <div className={styles.pp}>
                        共检索到
                        <span className={styles.num}>{this.state.total}</span>
                        个项目
                      </div>
                    </div>
                  </div>
                </div>
                <div className={styles.listBox}>
                  {this.state.searchList.map(item => {
                    return (
                      <div
                        className={styles.descriptionsBox}
                        key={item.id}
                        style={{ marginBottom: "2%" }}
                      >
                        <div className={styles.descriptionsHead}>
                          <div className={styles.clearfix}>
                            <div className={styles.fl}>
                              <div className={styles.descriptionsIcon}>
                                {item.logo ? (
                                  <img src={item.logo} alt="" />
                                ) : (
                                  <div> {item.title.charAt(0)}</div>
                                )}
                              </div>
                            </div>
                            <div className={styles.fl}>
                              <div className={styles.descriptionsTitle}>
                                <div
                                  onClick={() => this.handleToDetaile(item.id)}
                                >
                                  {
                                    <p
                                      dangerouslySetInnerHTML={{
                                        __html: item.title
                                      }}
                                      style={{marginTop:"10px"}}
                                    />
                                  }
                                </div>
                              </div>
                              <div className={styles.descriptionsNum}>
                                <Space size={40}>
                                  <span>发布时间：{item.releaseTime}</span>
                                  <span>点击量：{item.visitNum}</span>
                                  <span>使用量：{item.usedNum}</span>
                                </Space>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className={styles.descriptionsBody}>
                          <Descriptions column={2}>
                            <Descriptions.Item label="资源发布者">
                              {
                                <p
                                  dangerouslySetInnerHTML={{
                                    // __html: item.publisherName
                                    __html: item.publisher
                                  }}
                                />
                              }
                            </Descriptions.Item>
                            <Descriptions.Item label="资源所属部门">
                              {
                                <p
                                  dangerouslySetInnerHTML={{
                                    __html: item.department
                                  }}
                                />
                              }
                            </Descriptions.Item>
                            <Descriptions.Item label="使用范围">
                              {
                                <p
                                  dangerouslySetInnerHTML={{
                                    __html: item.useScopeName
                                  }}
                                />
                              }
                            </Descriptions.Item>
                            <Descriptions.Item label="数据格式">
                              {item.dataFormatName}
                            </Descriptions.Item>
                            <Descriptions.Item label="所属科目">
                              {
                                <p
                                  dangerouslySetInnerHTML={{
                                    __html: item.subjectsName
                                  }}
                                />
                              }
                            </Descriptions.Item>
                            <Descriptions.Item label="资源大小">
                              {item.size}
                            </Descriptions.Item>
                            <Descriptions.Item label="查看次数">
                              {item.visitNum}
                            </Descriptions.Item>
                            <Descriptions.Item label="关键词">
                              {
                                <p
                                  dangerouslySetInnerHTML={{
                                    __html: item.keyWords
                                  }}
                                />
                              }
                            </Descriptions.Item>
                            <Descriptions.Item label="资产介绍" span={2}>
                              {
                                <p
                                  dangerouslySetInnerHTML={{
                                    __html: item.introduction
                                  }}
                                />
                              }
                            </Descriptions.Item>
                            <Descriptions.Item label="">
                              {item.isCollection === 0 ? (
                                <span
                                  className={styles.descriptionsBtn}
                                  onClick={() => this.isCollect(item.id)}
                                >
                                  收藏
                                </span>
                              ) : (
                                <span
                                  className={styles.descriptionsBtn}
                                  onClick={() => this.deleteCollect(item.id)}
                                >
                                  取消收藏
                                </span>
                              )}
                              <span
                                className={styles.descriptionsBtn}
                                onClick={() => this.addShare(item, item.id)}
                              >
                                分享
                              </span>
                              <span
                                className={styles.descriptionsBtn}
                                onClick={this.showModal}
                              >
                                请求授权
                              </span>
                            </Descriptions.Item>
                          </Descriptions>
                        </div>
                      </div>
                    );
                  })}

                  <div className={styles.pagination}>
                    <Pagination
                      total={total}
                      showSizeChanger
                      showQuickJumper
                      current={pageNum === 0 ? 1 : pageNum}
                      defaultCurrent={1}
                      defaultPageSize={5}
                      pageSizeOptions={[5, 10, 20, 50]}
                      showTotal={total => `共 ${total} 条`}
                      onChange={this.pageChange}
                      onShowSizeChange={this.pageSizeChange}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* 点击分享弹窗 */}
        <Modal
          title="分享"
          visible={isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div className={styles.modelTitle}>
            <span className={styles.modelLeftText}>资源标题:</span>{AnnounceModel.title}
          </div>
          <div className={styles.modelTitle}>
            <span className={styles.modelLeftText}>资源发布者:</span>{AnnounceModel.publisher}
          </div>
          <div className={styles.modelTitle}>
            <span className={styles.modelLeftText}>请选择分享:</span>
            <AutoComplete
            placeholder="输入分享对象"
            options={autoOptions}
            onChange={this.antoChange}
            onSearch={this.autoSearch}
            onSelect={this.antoSelect}
            style={{width:"50%"}}/>
          </div>
        </Modal>

        {/* 点击授权弹窗 */}
        <Modal
          title="授权"
          visible={isModalVisible1}
          footer={null}
          width={2000}
          style={{ top: 20 }}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div>
            <iframe
              width="100%"
              height={750}
              src="http://21.108.153.111:9908/epm-dataCloud-v2/shopCart/base/dataApply/835922429822578688"
            />
          </div>
        </Modal>
      </div>
    );
  }
}

export default DataAssets;
